<template>
  <div class="remind_index">
    <div class="remind_index_tab" v-show="formMsg.state != 1">
      <!-- table -->
      <div class="remind_index_tab_d">
        <div class="remind_index_tab_d_d">
          <div class="remind_index_tab_d_back" @click="goBack">
            <img src="static\image\search\page_back.png" alt="" />
          </div>
          <div v-if="formMsg.isReport == 1" :class="{ active: flag == 0 }" @click.stop.prevent="changeTab(0)">
            数据上报
          </div>
          <div :class="{ active: flag == 1 }" @click.stop.prevent="changeTab(1)">
            公文
          </div>
          <div v-if="
              formMsg.isFeedback == 1 &&
              formMsg.fbcList.length > 0 &&
              (fileARR.length > 0 || remarkARR.length > 0)
            " :class="{ active: flag == 2 }" @click.stop.prevent="changeTab(2)">
            反馈
          </div>
          <div v-if="!$isNull(formMsg.docAddFiles)" :class="{ active: flag == 3 }" @click.stop.prevent="changeTab(3)">
            公文附件
          </div>
        </div>
        <div v-if="formMsg.docPdfId" class="remind_index_tab_d_f">
          <Tooltip content="下载公文" placement="bottom">
            <a :href="`${$store.state.url_official}office/out/downLoad/${formMsg.docPdfId}`">
              <img src="static/image/home/chat/fd_icon_hover.png" />
            </a>
          </Tooltip>
        </div>
      </div>
      <!-- v-show解决在反馈的时候错误显示表格的问题 -->
      <div class="remind_index_tab_c" v-show="flag == 0 && formMsg.isReport == 1">
        <div class="offficialAdd_sub">
          <div @click.stop.prevent="isReportToShow = !isReportToShow">
            {{ "Excel导入" }}
          </div>
          <!-- <div>{{ "暂存" }}</div> -->
          <div @click.stop.prevent="submitExcel">{{ "提交" }}</div>
          <!-- <div>{{ "待上报" }}</div> -->
        </div>
        <div class="luckysheet" id="luckysheet" style="width: 100%; height: 100%"></div>
      </div>
      <div class="remind_index_tab_document" v-show="flag == 1" ref="remind_index_tab_document">
        <!-- pdf插件展示第一版 -->
        <!-- <tep
          v-if="!formMsg.docPdfId"
          :formMsg="formMsg"
          @onDocumentReady="onDocumentReady"
          :isEditor="isEditor"
        ></tep>
        <pdf v-else :pdfUrlId="formMsg.docPdfId"></pdf> -->

        <!-- 图片展示第二版 -->
        <!-- <tep
          v-if="!formMsg.docImgPathAll"
          :formMsg="formMsg"
          @onDocumentReady="onDocumentReady"
          :isEditor="isEditor"
        ></tep>
        <img
          v-else
          :src="`${this.$store.state.url_official}office/out/downLoad/${formMsg.docImgPathAll}`"
        /> -->
        <!-- 图片展示第三版 -->
        <tep v-if="!formMsg.docImgPath" :formMsg="formMsg" @onDocumentReady="onDocumentReady" :isEditor="isEditor"></tep>
        <div v-else class="remind_index_tab_document_item" v-for="(docImgPathItem, index) in formMsg.docImgPath" :key="index + 'docImgPath'">
          <img :src="docImgPathItem" @load="loadImage(index)" class="docImgPath" />
        </div>
      </div>
      <!-- 反馈 -->
      <div class="my_el-tab-pane" v-show="
          flag == 2 &&
          formMsg.isFeedback == 1 &&
          formMsg.feedBacked == 0 &&
          formMsg.fbcList.length > 0 &&
          (fileARR.length > 0 || remarkARR.length > 0)
        ">
        <div v-for="(item, index) in formMsg.fbcList" :key="index + 'fbcList'">
          <div class="remind_index_file" v-if="item.type == 1 && !item.fdVlue" v-loading="item.loading">
            <div class="remind_index_file_t">{{ item.objectName }}</div>
            <el-upload :class="[
                'avatar-uploader',
                {
                  disabled: item.isUpdate,
                  delErrorImgLast: item.isUpdate,
                  delErrorImg: !item.isUpdateError,
                },
              ]" list-type="picture-card" action="#" :auto-upload="false" :multiple="false" :data="{ item: item }" :on-change="
                (file, fileList) => {
                  changeFile(file, fileList, item);
                }
              " :on-remove="
                (file, fileList) => {
                  removeFile(file, fileList, item);
                }
              ">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div v-if="!item.isUpdate" class="Danger remind_index_file_warning">
              *-*请上传附件
            </div>
          </div>
          <div class="remind_index_file" v-if="item.type == 3 && !item.fdVlue">
            <div class="remind_index_file_t">{{ item.objectName }}</div>
            <el-input type="textarea" v-model="item.remark" maxlength="100" @blur="isInputText(item)"></el-input>
            <div v-if="!item.isInput" class="Danger remind_index_file_warning">
              *-*请填写文本说明
            </div>
          </div>
        </div>
        <div :class="[
            'remind_index_file',
            { remind_index_file_feedback: isFeedbackd },
          ]">
          <div class="remind_index_file_t"></div>
          <div class="offficialAdd_sub file">
            <div v-if="!isFeedbackd" class="offficialAdd_sub_color" @click.stop.prevent="feedbackSub">
              {{ "提交" }}
            </div>
            <div class="offficialAdd_sub_chat" @click.stop.prevent="dbNewChat">
              <img src="static/image/home/contact/icon_contact.png" />
              <span>{{
                (!$isNull(userInfo.departmentname)
                  ? userInfo.departmentname
                  : "") +
                formMsg.createByName +
                "(" +
                formMsg.createById +
                ")"
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="my_el-tab-pane" v-show="flag == 2 && formMsg.isFeedback == 1 && formMsg.feedBacked == 1">
        已反馈
      </div>
      <div v-show="flag == 3">
        <div class="fileListStyle">
          <div class="fileListStyle_c" v-for="(item, index) in downLoadFileList" :key="index + 'downLoadFileList'">
            <div class="fileListStyle_c_l">
              <div class="fileListStyle_c_l_t">
                <img src="static/image/home/fiels.png" />
              </div>
              <div class="fileListStyle_c_l_c">
                <div class="fileListStyle_c_l_c_n">{{ item.name }}</div>
                <div>{{ item.size }}</div>
              </div>
            </div>
            <div v-if="!item.filePath" class="fileListStyle_c_r" @click.stop.prevent="downLoadFile(item)">
              下载
            </div>
            <div v-else class="fileListStyle_c_r" @click.stop.prevent="toPreviewFile(item)">
              预览
            </div>
          </div>
        </div>
      </div>
      <div class="remind_foot">
        <div class="foot_page_per" @click="changeFormMsg(1)" v-show="getoffName(1)">
          上一条 {{getoffName(1)}}
        </div>
        <div class="foot_page_next" @click="changeFormMsg(0)" v-show="getoffName(0)">
          下一条 {{getoffName(0)}}
        </div>
      </div>
    </div>
    <div class="remind_index_tab_d_back1" v-show="formMsg.state == 1" @click="goBack">
      <img src="static\image\search\page_back.png" alt="" />
    </div>
    <!-- 审核意见 -->
    <div class="remind_index_check" v-show="formMsg.state == 1">
      <div class="remind_index_check_t">
        <tep :formMsg="formMsg" :officialKey="officialKey" :isEditor="isEditor"></tep>
      </div>
      <div class="remind_index_check_b">
        <div class="remind_index_check_t">
          <span>审核意见</span>
          <span class="Danger" v-if="isCheck">*—*请填写审核意见(限200字)</span>
        </div>
        <el-input type="textarea" ref="textareas" v-model="suggest" :maxlength="200"></el-input>
        <div class="offficialAdd_sub">
          <div @click.stop.prevent="isPass(1)">{{ "通过" }}</div>
          <div @click.stop.prevent="isPass(2)">{{ "不通过" }}</div>
        </div>
      </div>
    </div>
    <!-- 上报Excel导入导出 -->
    <div class="remind_index_export_to" v-show="isReportToShow">
      <div class="remind_index_export_to_c">
        <div class="remind_index_export_to_c_o">
          <i class="el-icon-close" @click.stop.prevent="isReportToShow = !isReportToShow"></i>
        </div>
        <div class="remind_index_export_to_c_t">
          {{ "*-*请先导出模板，确保表头与当前一致！" }}
        </div>
        <div class="remind_index_export_to_c_b">
          <div>
            <el-button size="small" type="primary" @click="setExcelExport">{{
              "导出"
            }}</el-button>
          </div>
          <div>
            <el-upload :class="['upload-demo']" action="#" :auto-upload="false" :multiple="false" :on-change="
                (file, fileList) => {
                  changeFile_excel(file, fileList);
                }
              ">
              <el-button size="small" type="primary">{{ "导入" }}</el-button>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <!-- zk0429新增,倒计时 -->
    <div class="seconds_num" v-if="officialTime > 0">
      <span>{{ officialTime }}</span><span>s</span>
    </div>
  </div>
</template>
<script>
import tep from "../template/official_template";
import { mapState, mapMutations } from "vuex";
import { getUserInfo } from "@/api/officialRemind";
export default {
  props: {
    formMsg: {
      type: Object,
      default: () => {
        return {};
      },
    },
    downLoadFileList: {
      type: Array,
      default: () => {
        return {};
      },
    },
    remindOfficialList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    tep,
    // pdf,
  },
  computed: {
    ...mapState(["timeoutObj"]),
  },
  data() {
    return {
      activeName: "1",
      tabList: ["数据上报", "公文", "反馈"],
      flag: 0,
      remark: null,
      fileList: [],
      suggest: null,
      userInfo: {
        departmentname: null,
      },
      isCheck: false,
      fbcList: [],
      fileARR: [],
      remarkARR: [],
      officialKey: null,
      isEditor: false,
      isFeedbackd: false,
      isReportToShow: false,
      officialTime: 0, //zk0429新增
      isBeginTime: true,
      currentIndex: 0,
    };
  },
  watch: {
    formMsg() {
      if (this.formMsg != {}) {
        if (this.formMsg.isReport == 1) {
          this.getAppearList();
        }
        this.getUserInfo();
        this.createFormMsg();
      }
    },
    flag() {
      let options = {
        container: "luckysheet", // 设定DOM容器的id
        showtoolbar: false,
      };
      luckysheet.create(options);
    },
  },
  methods: {
    ...mapMutations(["setTimeoutObj"]),
    createFormMsg() {
      // 初始化字段
      this.formMsg.fbcList = this.formMsg.fbcList ? this.formMsg.fbcList : [];
      this.fileARR =
        this.formMsg.fbcList.filter((item) => item.type == 1) || [];
      this.remarkARR =
        this.formMsg.fbcList.filter((item) => item.type == 3) || [];

      if (this.formMsg.isReport != 1) {
        this.activeName = "2";
        this.flag = 1;
      }
      // 替换批注的字段
      if (this.formMsg.state == 1) {
        this.isEditor = true;
        this.officialKey = this.$func.uuid();
        this.formMsg.docFileId = this.formMsg.comFileId;
        // this.formMsg.docFileId = this.formMsg.docFileId;
      }
      // 是否调用接口
      if (this.formMsg.state != 1) {
        // 是否上报
        if (this.formMsg.isReport == 1) this.getAppearList();
        // 是否反馈
        if (this.formMsg.isFeedback == 1) this.getUserInfo();
      }

      // 查看电子版借阅
      if (this.formMsg.recordId) this.getBorrowRecord();
      // 回显已经反馈的数据
      if (this.formMsg.fbcList.length) {
        for (let item of this.formMsg.fbcList) {
          // 标记已经反馈
          if (item.fdVlue) this.isFeedbackd = true;
          // // 赋值文件
          // if (item.type == 1) {
          //   this.fileList.push({
          //     fileId: item.fdVlue,
          //     fileName: item.objectName,
          //     fcId: item.fcId,
          //     fdId: item.fdId,
          //   });
          // }
          // // 赋值文本
          // if (item.type == 3) {
          // }
        }
      }
      // 获取附件详情提供下载
      if (!this.$isNull(this.formMsg.docAddFiles)) {
        this.getFiles();
      }
    },
    changeFormMsg(flag) {
      flag ? this.currentIndex-- : this.currentIndex++;
      clearInterval(window.lookOfficialInterval);
      this.$emit("changeFormMsg", this.currentIndex);
      this.$refs.remind_index_tab_document && this.scrollTop()
    },
    scrollTop () {
      this.$refs.remind_index_tab_document.scrollTop = 0
    },
    getoffName(flag) {
      let index = flag ? this.currentIndex - 1 : this.currentIndex + 1;
      if (index >= 0 && index < this.remindOfficialList.length) {
        return this.remindOfficialList[index].VALUE.length > 13
          ? this.remindOfficialList[index].VALUE.slice(0, 13) + "..."
          : this.remindOfficialList[index].VALUE;
      } else {
        return "";
      }
    },
    getCurrentIndex() {
      //查询当前公文的下标
      this.remindOfficialList.find((value, index) => {
        if (value.oId == this.formMsg.oId) {
          return (this.currentIndex = index);
        }
      });
    },
    loadImage(index) {
      //cxr0514修改第一张图片加载完成后才开始倒计时

      if (index == 0 && !this.formMsg.viewerTime) {
        // 是否需要查看
        if (
          (this.formMsg.state == 4 || this.formMsg.state == 5) &&
          !this.formMsg.viewerTime
        ) {
          this.readTimeout()
        }
      }
    },
    onDocumentReady() {
      this.$refs.textareas.focus();
      // 不是审核人 且 未读状态 启动定时器
      if (
        (this.formMsg.state == 4 || this.formMsg.state == 5) &&
        !this.formMsg.viewerTime
      ){
        this.readTimeout()
      }
    },
    // 阅读定时器
    readTimeout(){
      // 启动定时器、延时器
      if (this.formMsg.textLength) {
        // 计算时间
        //zk0429新增,计算倒计时
        let totalTime;
        if (this.timeoutObj[this.formMsg.oId]) {
          //打开过但倒计时没结束就关闭了
          console.log(this.timeoutObj);
          totalTime = this.timeoutObj[this.formMsg.oId];
        } else {
          //没打开过
          // 2022/5/13 zc修改 将时间缩短为2/3
          // totalTime = parseInt(
          //   (((this.formMsg.textLength * 30) / 1000) * 2) / 3
          // ); //zk0429新增

          totalTime = 5
        }
        this.officialTime = totalTime;
        // 启动定时器
        window.lookOfficialInterval = setInterval(() => {
          --this.officialTime;
          // console.log(this.officialTime, "启动定时器");
          if (this.officialTime < 1) {
            this.officialTime = 0;
            window.lookOfficialInterval &&
              clearInterval(window.lookOfficialInterval);
          }
        }, 1000);
        // 启动延时器
        window.lookOfficialTimeout = setTimeout(() => {
          this.getViewDocument();
          window.lookOfficialTimeout &&
            clearTimeout(window.lookOfficialTimeout);
          // 及时更新已完成状态
          this.updateOver(this.formMsg);
        }, totalTime * 1000); //zk0429修改this.officialTime -> totalTime
      } else {
        this.getViewDocument();
        // 及时更新已完成状态
        this.updateOver(this.formMsg);
      }
    },
    // 切换左侧导航
    handleClick(tab, event) {},
    // 切换导航
    changeTab(index) {
      this.flag = index;
      if (index == 0) this.getAppearList();
    },
    // 获取上报情况
    getAppearList() {
      let _this = this;
      _this.$ajax_official(
        "get",
        `office/document/document/getFillList/${_this.formMsg.oId}/1`,
        {},
        (res) => {
          console.log(res, 448);
          if (res.code == 200) {
            // 赋值模板ID and 表头所占的行数
            _this.formMsg["fillId"] = res.data[0].fillId;
            _this.formMsg["spcNoCount"] = res.data[0].spcNoCount;
            // 初始化Excel
            let options = {
              container: "luckysheet", // 设定DOM容器的id
              lang: "zh", // 设定表格语言
              showinfobar: false,
              showsheetbar: false,
              row: res.data[0].spcNo > 12 ? res.data[0].spcNo : 12,
              column: 40,
              data: [JSON.parse(res.data[0].text)],
              hook: {
                workbookCreateAfter: function (info) {
                  _this.$Message.success("表格载入成功");
                },
              },
            };
            luckysheet.create(options);
          } else if (res.code == 401) {
            _this.$getOfficialToken(_this.$store.state.myInfo);
          } else {
            _this.$Message.warning(res.msg);
          }
        },
        (res) => {
          _this.$Message.warning(res.msg);
        }
      );
    },
    // 提交表格数据
    submitExcel() {
      let SheetData = luckysheet.getSheetData() || [];
      let data = [];
      let index = parseInt(this.formMsg.spcNoCount) + 1;
      for (let i = index; i < SheetData.length; i++) {
        if (SheetData[i]) {
          for (let j in SheetData[i]) {
            if (SheetData[i][j]) {
              data.push({
                oId: this.formMsg.oId,
                fillId: this.formMsg.fillId,
                spcNo: parseInt(i),
                key: "v" + (parseInt(j) + 1),
                value: SheetData[i][j].m,
              });
            }
          }
        }
      }
      if (data.length === 0) {
        this.$message({
          message: "当前仅为表头内容，请换行添加数据！",
          type: "warning",
        });
        return;
      }
      this.$ajax_official_JSON(
        "post",
        "office/document/fillData/addExcel",
        JSON.stringify(data),
        (res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            // this.$emit("isUpdateRemindList");
            this.goBack();
          } else {
            this.$Message.error(res.msg);
          }
        },
        (res) => {
          this.$Message.error(res.msg);
        }
      );
    },
    // 导出
    setExcelExport() {
      // this.$downLoadFiles(
      //   `office/reportTemplate/export/${this.formMsg && this.formMsg.fillId}`
      // );
      this.$downLoadFiles(
        `office/reportTemplate/export/data/${this.formMsg && this.formMsg.oId}`
      );
      this.isReportToShow = !this.isReportToShow;
    },
    // 导入
    setExcelTo(file) {
      this.$ajax_official_update(
        "post",
        `office/document/fillData/excel`,
        Object.assign(file, {
          oId: this.formMsg.oId,
          fillId: this.formMsg.fillId,
        }),
        (res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.getAppearList();
            this.isReportToShow = !this.isReportToShow;
          } else {
            this.$Message.warning(res.msg);
          }
        },
        (res) => {
          this.$Message.warning(res.msg);
        }
      );
    },
    // 鼠标离开说明输入框触发
    isInputText(item) {
      if (item.remark) this.$set(item, "isInput", true);
      else this.$set(item, "isInput", false);
    },
    // 上传文件时触发
    changeFile(file, fileList, item) {
      if (parseInt(file.size) / 1024 / 1024 > 100) {
        this.$Message.warning("上传文件超过最大限制100M");
        this.removeFile(file, fileList, item);
        return;
      }
      this.uploadFile(file, item);
    },
    // 导入excel触发
    changeFile_excel(file, fileList) {
      console.log(file, 571);
      this.setExcelTo(file);
    },
    // 删除文件
    removeFile(file, fileList, item) {
      this.$set(item, "isUpdate", false);
      this.$set(item, "isUpdateError", false);
      for (let i in this.fileList) {
        if (this.fileList[i].uid == file.uid) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    },
    // 上传文件
    uploadFile(file, item) {
      this.$set(item, "loading", true);
      this.$ajax_official_update(
        "post",
        `office/document/files/upload`,
        file,
        (res) => {
          if (res.code == 200) {
            this.$set(
              file,
              "url",
              require("../../../static/image/home/file_icon.png")
            );
            this.fileList.push({
              fileId: res.data.filesId,
              fileName: item.objectName,
              uid: res.data.uid,
              fcId: item.fcId,
              fdId: item.fdId,
            });
            this.$set(item, "isUpdate", true);
            this.$set(item, "loading", false);
          } else {
            this.$set(item, "loading", false);
            this.$Message.warning(res.msg);
          }
        },
        (res) => {
          this.$set(item, "loading", false);
          this.$Message.warning(res.msg);
        }
      );
    },
    // 反馈提交
    feedbackSub() {
      // 校验是否为空
      console.log(this.remarkARR, this.fileARR, 779);
      if (this.fileARR.length > 0) {
        for (let item of this.fileARR) {
          if (!item.isUpdate)
            return this.$Message.warning("提交失败,请上传附件");
        }
      }

      console.log(666666666);
      if (this.remarkARR.length > 0) {
        for (let item of this.remarkARR) {
          if (!item.isInput)
            return this.$Message.warning("提交失败,请填写说明");
        }
      }
      // 处理文本数据
      let remarkList = [];
      this.remarkARR.map((temp) => {
        remarkList.push({
          objectName: temp.objectName,
          remarkContent: temp.remark,
          fcId: temp.fcId,
          fdId: temp.fdId,
        });
      });
      this.$ajax_official_JSON(
        "post",
        "office/document/data/add",
        JSON.stringify({
          oId: this.formMsg.oId,
          // fcId: this.formMsg.oId,
          fileList: this.fileList,
          remarkList: remarkList,
        }),
        (res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$emit("closeRemindView");
            this.$emit("isUpdateRemindList");
          } else {
            this.$Message.error(res.msg);
          }
        },
        (res) => {
          this.$Message.error(res.msg);
        }
      );
    },
    // 提交审核
    isPass(flag) {
      if (!this.suggest) {
        this.isCheck = true;
        return;
      }
      // 调取在线文档编辑保存接口
      this.$ajax_official(
        "post",
        `office/document/document/autoSave/${
          this.officialKey + "_" + this.formMsg.docFileId
        }`,
        {},
        (res) => {
          if (res.code == 200) {
            this.submitCheck(flag);
          } else {
            this.$Message.warning(res.msg);
          }
        },
        (res) => {
          this.$Message.warning(res.msg);
        }
      );
    },
    // 提交审核接口
    submitCheck(flag) {
      this.$ajax_official_JSON(
        "post",
        "office/document/log/examine",
        JSON.stringify({
          oId: this.formMsg.oId,
          auditId: this.formMsg.auditConfigId,
          auditBy: this.$store.state.myInfo.id,
          auditOpinion: flag,
          remark: this.suggest,
        }),
        (res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$emit("getOfficial");
            this.$emit("isUpdateRemindList");
          } else {
            this.$Message.error(res.msg);
          }
        },
        (res) => {
          this.$Message.error(res.msg);
        }
      );
    },
    // 获取用户个人信息
    getUserInfo() {
      getUserInfo({
        userid: this.formMsg.createByI,
      })
        .then((res) => {
          if (res.result == "200") {
            this.userInfo = Object.assign(res.data, {
              id: this.formMsg.createById,
            });
          }
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 跳转至聊天列表
    dbNewChat() {
      this.$emit("dbNewChat", this.userInfo);
    },
    // 查看公文
    getViewDocument() {
      console.log(this.formMsg, "进入已完成接口");
      this.$ajax_official(
        "get",
        `office/document/document/viewDocuments/${this.formMsg.oId}`,
        {},
        (res) => {
          console.log(res, "已完成返回");
          if (res.code == 200) {
            this.$emit("isUpdateRemindList");
            // this.$emit("getOfficial");//zk0428新增,调过已完成的接口后,重新获取公文列表
          } else if (res.code == 401) {
            this.$getOfficialToken(this.$store.state.myInfo);
          } else {
            this.$Message.warning(res.msg);
          }
        },
        (res) => {
          this.$Message.warning(res.msg);
        }
      );
    },
    // 查看电子版借阅
    getBorrowRecord() {
      this.$ajax_official(
        "post",
        `office/borrowRecord/read`,
        { id: this.formMsg.recordId },
        (res) => {
          if (res.code == 200) {
            this.$emit("isUpdateRemindList");
          } else if (res.code == 401) {
            this.$getOfficialToken(this.$store.state.myInfo);
          } else {
            this.$Message.warning(res.msg);
          }
        },
        (res) => {
          this.$Message.warning(res.msg);
        }
      );
    },
    // 获取附件详情
    getFiles() {
      let arr = this.formMsg.docAddFiles.split(",");
      console.log(arr);
      this.$emit("setOfficialFileSQL", arr);
    },
    // 下载公文附件
    downLoadFile(item) {
      let _this = this;
      item["messageId"] = item.id;
      _this.$emit("downloadListAddProcess", item);
      let fileFormat = item.name.substring(item.name.lastIndexOf(".") + 1);
      _this.$shell("SaveFileUrlGW", [
        _this.$store.state.myInfo.id,
        _this.$store.state.url_official + `office/out/downLoad/${item.id}`,
        item.messageId,
        item.name,
        fileFormat,
        "",
      ]);
      // 原有的下载方式
      // this.$downLoadFiles(
      //   `office/document/files/downLoad/${item.id}`,
      //   item.name
      // );
    },
    // 公文附件预览
    toPreviewFile(item) {
      console.log(item, "文件预览item");
      let rep = this.$shell("OpenFlieByUrl", [
        item.filePath ? this.$isRelativePath(item.filePath) : "",
      ]);
      rep = JSON.parse(rep);
      console.log(rep, "文件预览返回值");
      if (rep.return_code == "FALSE") {
        this.$Message.info("系统找不到指定的文件,请重新下载");
        this.$set(item, "filePath", "");
      }
    },
    // SQL
    operationalDatabase(statements, index) {
      let to = JSON.stringify({
        Sqlstr: statements,
      });
      return arguments[1]
        ? JSON.parse(this.$loginInfo(to, index))
        : JSON.parse(this.$loginInfo(to));
    },
    // 及时更新已完成状态
    updateOver(info) {
      console.log(info, "及时更新已完成状态U");
      // if (
      //   (info.isReport == 1 || !info.isReport) &&
      //   (info.isFeedback == 1 || !info.isFeedback)
      // ) {//zk0510修改,不执行判断条件
      this.$emit("updateOver", info);
      // }
    },
    // zk0429新增,剩余倒计时存入store
    storeTimeoutObj() {
      window.lookOfficialTimeout && clearTimeout(window.lookOfficialTimeout);
      window.lookOfficialInterval && clearInterval(window.lookOfficialInterval);
      console.log(this.formMsg, this.officialTime);
      if (this.officialTime >= 0) {
        this.setTimeoutObj({ id: this.formMsg.oId, time: this.officialTime });
      }
    },
    //返回上一级
    goBack() {
      this.$emit("goBack", 1);
    },
  },
  created() {
    this.createFormMsg();
    // // 初始化字段
    // this.formMsg.fbcList = this.formMsg.fbcList ? this.formMsg.fbcList : [];
    // this.fileARR = this.formMsg.fbcList.filter((item) => item.type == 1) || [];
    // this.remarkARR =
    //   this.formMsg.fbcList.filter((item) => item.type == 3) || [];

    // if (this.formMsg.isReport != 1) {
    //   this.activeName = "2";
    //   this.flag = 1;
    // }
    // // 替换批注的字段
    // if (this.formMsg.state == 1) {
    //   this.isEditor = true;
    //   this.officialKey = this.$func.uuid();
    //   this.formMsg.docFileId = this.formMsg.comFileId;
    //   // this.formMsg.docFileId = this.formMsg.docFileId;
    // }
    // // 是否调用接口
    // if (this.formMsg.state != 1) {
    //   // 是否上报
    //   if (this.formMsg.isReport == 1) this.getAppearList();
    //   // 是否反馈
    //   if (this.formMsg.isFeedback == 1) this.getUserInfo();
    // }

    // // 查看电子版借阅
    // if (this.formMsg.recordId) this.getBorrowRecord();
    // // 回显已经反馈的数据
    // if (this.formMsg.fbcList.length) {
    //   for (let item of this.formMsg.fbcList) {
    //     // 标记已经反馈
    //     if (item.fdVlue) this.isFeedbackd = true;
    //     // // 赋值文件
    //     // if (item.type == 1) {
    //     //   this.fileList.push({
    //     //     fileId: item.fdVlue,
    //     //     fileName: item.objectName,
    //     //     fcId: item.fcId,
    //     //     fdId: item.fdId,
    //     //   });
    //     // }
    //     // // 赋值文本
    //     // if (item.type == 3) {
    //     // }
    //   }
    // }
    // // 获取附件详情提供下载
    // if (!this.$isNull(this.formMsg.docAddFiles)) {
    //   this.getFiles();
    // }
  },
  mounted() {
    this.getCurrentIndex();
  },
  destroyed() {
    window.lookOfficialInterval && clearInterval(window.lookOfficialInterval);
    this.storeTimeoutObj();
    luckysheet.exitEditMode();
    if (this.formMsg.isReport == 1) {
      let options = {
        container: "luckysheet", // 设定DOM容器的id
        showtoolbar: false,
      };
      luckysheet.create(options);
    }
  },
};
</script>
<style lang="less" scoped>
.remind_index {
  width: 100%;
  height: calc(100% - 30px);
  min-height: 27.5625rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .seconds_num {
    position: absolute;
    top: 62px;
    right: 18px;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    background-color: #fff1e5;
    border: 1px solid #ffcf99;
    & > span {
      font-size: 14px;
      color: #fa7500;
      &:first-child {
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
  }
  .remind_index_tab {
    width: 100%;
    height: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    .remind_index_tab_d {
      // display: flex;
      font-size: 14px;
      // margin-bottom: 10px;
      padding: 0 20px;
      border-bottom: 1px solid #eeeeee;
      // justify-content: space-between;
      .remind_index_tab_d_d {
        display: flex;
        float: left;
        div {
          padding: 4px 20px;
          border-bottom: 3px solid transparent;
          cursor: pointer;
        }
        .remind_index_tab_d_back {
          padding: 4px 5px;
          cursor: pointer;
        }
        div.active {
          border-bottom: 3px solid #fa7500;
        }
      }
      .remind_index_tab_d_f {
        float: right;
      }
    }
    .remind_index_tab_c {
      // margin-top: 10px;
      padding-left: 20px;
    }
    .remind_index_tab_document {
      display: flex;
      // justify-content: space-around;
      flex-direction: column;
      background: #eeeeee;
      overflow-y: scroll;
      height: 0;
      flex-grow: 1;
      .remind_index_tab_document_item {
        text-align: center;
        margin-bottom: 85px;
      }
    }
    /deep/.el-tabs__content {
      height: 100%;
    }
    /deep/.el-tabs__active-bar {
      width: 120px;
    }
    /deep/.el-tabs__item {
      width: 120px;
      text-align: center;
      padding: 0;
    }
    /deep/.el-tabs__nav-wrap::after {
      content: "";
      background-color: #eeeeee;
      height: 1px;
    }
    /deep/.el-table--border,
    /deep/.el-table__body-wrapper {
      height: auto !important;
    }
  }
  .remind_index_tab_add {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: #fbfbfb;
    cursor: pointer;
    img {
      margin-right: 10px;
    }
    div {
      font-size: 14px;
    }
  }
  .offficialAdd_sub {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    .offficialAdd_sub_color {
      border: 1px solid #fa7500;
      background: #ffffff;
      color: #fa7500;
    }
    .offficialAdd_sub_chat {
      width: unset;
      padding: 0 20px;
    }
    .offficialAdd_sub_up {
      border: 1px solid #fa7500;
      color: #fa7500;
    }
    div {
      width: 80px;
      height: 28px;
      border-radius: 4px;
      border: 1px solid #dddddd;
      font-size: 12px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 16px;
    }
    div:hover {
      border: 1px solid #fa7500;
      color: #fa7500;
    }
    .offficialAdd_sub_color:hover {
      border: 1px solid #fa7500;
      color: #ffffff;
    }
  }
  .offficialAdd_sub.active {
    position: absolute;
    top: 42px;
  }
  .offficialAdd_sub.file {
    padding-left: 16px;
    .offficialAdd_sub_color:hover {
      color: #fa7500;
    }
  }
  .remind_index_file {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .remind_index_file_t {
      margin-right: 30px;
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .remind_index_file_warning {
      margin-left: 20px;
    }
    /deep/.el-textarea {
      width: unset !important;
      flex: 1 !important;
    }
    /deep/.delErrorImg {
      .el-upload-list__item {
        display: none !important;
      }
    }
    /deep/.delErrorImgLast {
      li:last-of-type {
        display: block !important;
      }
    }
  }
  .remind_index_file_feedback {
    margin-left: -110px;
  }
  .remind_index_check {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 20px;
    padding-bottom: 200px;
    .remind_index_check_t {
      flex: 1;
    }
    .remind_index_check_b {
      position: fixed;
      bottom: 0;
      width: 100%;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      padding: 20px;
      background: #fff;
      .remind_index_check_t {
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 15px;
      }
    }
  }
  .remind_index_export_to {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    .remind_index_export_to_c {
      padding: 10px 10px 20px;
      background: #fff;
      border-radius: 4px;
      .remind_index_export_to_c_o {
        text-align: right;
        i {
          cursor: pointer;
        }
      }
      .remind_index_export_to_c_t {
        font-size: 15px;
        color: #333333;
        margin: 20px;
      }
      .remind_index_export_to_c_b {
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .my_el-tab-pane {
    flex: 1 !important;
    overflow-y: scroll !important;
    padding: 10px 0 0 50px;
  }
  .Danger {
    color: #f56c6c !important;
  }
  .disabled {
    /deep/.el-upload {
      display: none !important;
    }
  }
  /deep/.el-textarea__inner {
    resize: none;
  }
  /deep/.el-upload--picture-card,
  /deep/.el-upload-list__item {
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }
  .fileListStyle {
    width: 60%;
    margin-left: 40px;
    margin-top: 20px;
    .fileListStyle_c {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .fileListStyle_c_l {
        display: flex;
        align-items: center;
        .fileListStyle_c_l_t {
          margin-right: 16px;
          img {
            width: 32px;
            height: 32px;
          }
        }
        .fileListStyle_c_l_c {
          line-height: 2;
          .fileListStyle_c_l_c_n {
            max-width: 300px;
          }
        }
      }
      .fileListStyle_c_r {
        width: 50px;
        padding: 5px 10px;
        border: 1px solid #fa7500;
        border-radius: 4px;
        color: #fa7500;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
}
.docImgPath {
  width: 749px;
  height: 1123px;
}
.remind_index_tab_d_back1 {
  padding: 10px;
  cursor: pointer;
}
@media screen and (max-width: 950px) {
  .docImgPath {
    width: 600px;
    height: 850px;
  }
}
.remind_foot {
  position: fixed;
  height: 30px;
  width: calc(100% - 220px);
  bottom: 0px;
  background-color: rgb(247, 247, 247);
  line-height: 30px;
  padding: 0 10px;
  // display: flex;
  // justify-content: space-between;
  border: 1px solid #eeeeee;
  color: #e67529;
}
.foot_page_per {
  cursor: pointer;
  float: left;
}
.foot_page_next {
  cursor: pointer;
  float: right;
}
</style>
